<template>
	<view class="upmain">
		<view class="uplist">
			<view class="input-item">
				<view class="tit">任务标题<text>*</text></view>
				<input type="text" v-model="name"  placeholder="请输入任务标题(5-20字)" maxlength="20" />
			</view>
			<view class="input-item">
				<view class="tit">任务链接（选填）</view>
				<input type="text" v-model="rwurl"  placeholder="请输入任务链接"  />
			</view>
		</view>
		<view class="lines"></view>
		
		<view class="upnr">
			<view class="itemti u-f u-f-ac u-f-jsb">
				<view class="tit">任务步骤<text>*</text></view>
				<view class="addbnt"  @tap="actionSheetTap"> <text class="cell-more iconfont iconbianji1"></text>添加步骤</view>
			</view>
		</view>
		<view class="letsadd">
			<block v-for="(value,key) in buz" :key="key">
			<view class="lets">
				<view class="">
					<view class="letitle" style="width: 100%; height: 80upx;">
						第{{key+1}}步(图文说明)
						<text @tap="delbz(key)" style="float: right; height: 70upx; line-height: 70upx; padding:0 16upx; margin-top: 8upx; background: #ddd; border-radius: 10upx;">删除步骤</text>
					</view>
					<view>
						<input class="letp" style="height: 80upx; border-bottom: 1px solid #ddd;" type="text" v-model="value.name" placeholder="请填写任务步骤说明"  />
					</view>
				</view>
				<view class="uni-uploader-body">
					<view class="uni-uploader__files">
						<block  v-for="(image, index) in value.img" :key="index">
							<view class="uni-uploader__file">
								<!-- <view>{{image}}</view> -->
								<view @tap="delimg(key,index)" class="icon iconfont iconshanchu"></view>
								<image class="uni-uploader__img" src="image" :src="image" :data-src="image" @tap="previewImage" mode="aspectFill"></image>
							</view>
						</block>
						<view  class="uni-uploader__input-box"><view class="uni-uploader__input" @tap="chooseImage(key)"></view></view>
					</view>
				</view>
			</view>
			</block>
		</view>
		<view class="lines"></view>
		<view class="input-item">
			<view class="tit">备注数据（选填）</view>
			<input type="text"  placeholder="备注数据" maxlength="30" />
		</view>
		<view style="height: 160upx;"></view>
		<view class="upOnbox">
			<view class="upOnTaps" @tap="setTap()" >下一步</view>
		</view>
	</view>
</template>

<script>
	var sourceType = [['camera'], ['album'], ['camera', 'album']];
	var sizeType = [['compressed'], ['original'], ['compressed', 'original']];
	import {mapState} from 'vuex';//请求数据 mapState
	var yzyTime = require('../../../common/util.js');
	
	export default {
		props: {
			focus: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				title: 'action-sheet',
				name:'',
				type:'',
				rwurl:'',
				imageList: [],
				sourceType: ['拍照', '相册', '拍照或相册'],
				countIndex:1,
				count: [1],
				imgs:false,
				buz:[
					{
						name:"",
						img:[],
						imgtj:[]
					}
				]
			}
		},
		onLoad(e) {
			if(e.id){
				this.type=e.id
			}
		},
		onShow() {
			console.log(this.buz)
		},
		methods: {
			delimg(key,index) {
				uni.showModal({
					title: '提示',
					content: '是否要删除该图片',
					success: res => {
						if (res.confirm) {
							this.buz[key].img.splice(index, 1);
						}
					}
				});
			},
			delbz(key) {
				if(this.buz.length==1){
					this.$api.msg('不能删除');
					return;
				}
				uni.showModal({
					title: '提示',
					content: '是否要删除该步骤',
					success: res => {
						if (res.confirm) {
							this.buz.splice(key, 1);
						}
					}
				});
			},
			chooseImage: async function(key) {
				var that=this;
				uni.chooseImage({
					count: 1, //默认9
					sourceType: sourceType[this.sourceTypeIndex],
					sizeType: sizeType[this.sizeTypeIndex],
					success: res => {
						uni.showLoading({ mask: true,title: '正在上传...' });  
						uni.uploadFile({
							url: that.$serverUrl+'/index.php/Mobile/index/upload?id='+uni.getStorageSync("userInfo").id, //仅为示例，非真实的接口地址
							filePath: res.tempFilePaths[0],
							name: "file",
							dataType:"json",
							formData: {},
							success: (uploadFileRes) => {
									uni.hideLoading();
								var dataarr=JSON.parse(uploadFileRes.data);
								console.log(dataarr);
								if(dataarr.status==200){
									this.buz[key].img = this.buz[key].img.concat([dataarr.url]);
								}else{
									uni.showToast({
										title:dataarr.msg
									})
								}
							},
							complete(res) {
								//uni.hideLoading();
								console.log(res)
							}
						}); 
					}
				});
			},
			previewImage: function(e){
				var current = e.target.dataset.src;
				uni.previewImage({
					current: current,
					urls: this.imageList
				});
			},
			actionSheetTap() {
				var thia=this;
				uni.showActionSheet({
					title:'',
					itemList: ['图文说明', '收集截图'],
					success: (e) => {
						console.log(e.tapIndex);
						var list={
							name:"",
							img:[],
							imgtj:[]
						}
						thia.buz=thia.buz.concat(list)
						// uni.showToast({
						// 	title:"点击了第" + e.tapIndex + "个选项",
						// 	icon:"none"
						// })
					}
				})
			},
			setTap(){
				if(!this.name){
					this.$api.msg('任务标题不能为空');
					return;
				}
				if(!this.buz[0].name && this.buz[0].img.length==0){
					this.$api.msg('任务步骤不能为空');
					return;
				}
				var data={
					type:this.type,
					name:this.name,
					rwurl:this.rwurl,
					buz:this.buz,
				}
				uni.removeStorage({
					key: 'rwdata',
					success: function (res) {
					console.log('删除成功');
				}
				});
				uni.setStorage({//缓存配置信息
					key: 'rwdata',  
					data: data
				})
				console.log(data)
				uni.navigateTo({
					url: `/pages/user/task/upnr2`
				})
			}
		}
	}
</script>

<style>
	input{ caret-color:#FFB400}
	.input-item{
		width: 94%;
		margin: 0 auto;
		padding: 20upx 0;
		border-bottom: 2upx solid #eee;
	}
	.upOnbox{
		width: 100%;
		background: #fff;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 20upx 0;
	}
	.upOnTaps{
		width: 60%;
		margin: 0 auto;
		height: 80upx;
		line-height: 80upx;
		text-align: center;
		background: #1976FD;
		color: white;
		border-radius: 60px;
		font-size: 32upx;
	}
	.upOnTaps:active{
		background: #FFAC45;
		color: #333;
	}
	.upnr{
		width: 94%;
		margin: 0 auto;
		padding: 30upx 0;
		border-bottom: 2upx solid #eee;
	}
	.addbnt{
		font-size: 30upx;
		color: #000;
		background: #1976FD;
		padding: 2upx 30upx;
		box-sizing: border-box;
		border-radius: 60upx;
		color:white;
	}
	.addbnt:active{
		background: #1976FD;
		color: #666;
	}
	.upnr .tit text{
		color: #FF3333;
	}
	.upnr .tit{
		font-size: 32upx;
		color: #111;
		font-weight: 500;
	}
	.uplist .input-item:last-child{
		border-bottom: none;
	}
	.input-item .tit{
		font-size: 32upx;
		color: #111;
		font-weight: 500;
	}
	.input-item .tit text{
		color: #FF3333;
	}
	.input-item input{
		font-size: 28upx;
	}
	.lines{
		width: 100%;
		height: 20upx;
		background: #E5E5E5;
	}
	
	.uni-uploader__file {
		position: relative;
		margin: 4px!important;
	}
	.iconshanchu {
		z-index: 1;
		position: absolute;
		right: -10upx;
		top: -10upx;
		width: 46upx;
		height: 46upx;
		border-radius: 50%;
		line-height: 40upx;
		text-align: center;
		background: #ff1919;
		font-size: 24upx;
		color: #fff;
		border: 2px solid #fafafa;
	}
	.wdmstitleimg{
		padding: 8upx 0upx;
			padding-left: 50upx;
			font-size: 32upx;
			font-weight: 500;
			position: relative;
			border-bottom: 1upx solid #e5e5e5;
		}
		.wdmstitleimg text{
			color: #999;
			font-size: 28upx;
		}
		.wdmstitleimg:after {
			font-family: iconfont;
			position: absolute;
			top: 2px;
			left: 6px;
			content: '\e716';
			font-size: 36upx;
			color: #0077cc;
		}
	.letitle{
		font-size: 32upx;
		color: #333;
		font-weight: bold;
		line-height: 36px;
	}

	.mrimg{
		width: 180upx;
		height: 180upx;
	}
	.simtp{
		font-size: 10px;
		color: #a1a1a1;
		background: #f8f8f8;
		padding: 2px 4px;
		border-radius: 2px;
		margin-right: 10upx;
	}
	.smsmsg{
		width: 94%;
		margin: 0 auto;
		border-bottom: 1px solid #e5e5e5;
	}
	.smsmsg>view{
		line-height: 80upx;
		color: #999;
	}
	.bclis{
		line-height: 50px;
		margin-top: 24upx;
		padding-left: 4%;
		border-top: 10px solid #e5e5e5;
		box-sizing: border-box;
		font-size: 32upx;
		font-weight: bold;
		color: #777;
	}
	.lets{
		width: 94%;
		margin: 0upx auto;
		position: relative;
		padding-bottom: 40upx;
		box-sizing: border-box;
	}
	.letp{
		text-align: justify;
		text-align-last: left;
		font-size: 28upx;
		color: #666;
		line-height: 40upx;
	}
	
</style>
